<template>
	<view class="root">
		<view :style="{ margin: `46rpx 20rpx 0` }" class="bgc-fff br-20">
			<label
				v-for="(option, key) in model"
				:key="key"
				:style="{ padding: `30rpx 40rpx` }"
				@click="operation(key)"
			>
				<text class="color-333 fs-32 width-100">
					{{ option.title }}
				</text>

				<input
					class="input f1 height-100percent ml-30 mr-30 fs-28"
					:type="option.type"
					:maxlength="option.maxlength"
					:disabled="option.disabled"
					:placeholder="option.placeholder"
					:value="option.value"
					placeholder-class="color-ccc"
					@input="inputValue($event, key)"
				/>

				<uni-icons v-if="key === 'address'" type="arrowright" />
			</label>
		</view>

		<button
			class="br-20 bgc-2e54fd color-fff fs-34 fw-600 lh-3"
			:style="{ margin: `98rpx 20rpx` }"
			hover-class="tap-hover"
			@click="submit"
		>
			保存地址
		</button>
	</view>
</template>

<script lang="ts">
	import { Vue, Component } from "vue-property-decorator";
	import { sleep } from "@/static/libs/utils";

	@Component
	export default class AddAddress extends Vue {
		// component property
		addressInfo: AnyObject = {};
		get model(): AnyObject {
			const { addressInfo } = this;
			return {
				name: {
					title: "姓名",
					type: "text",
					maxlength: 16,
					placeholder: "请输入收货人姓名",
					value: addressInfo.name || "",
					data: addressInfo.name || "",
					name: "name",
				},
				phoneNumber: {
					title: "手机号",
					type: "number",
					maxlength: 11,
					placeholder: "请输入手机号码",
					value: addressInfo.mobile || "",
					data: addressInfo.mobile || "",
					name: "mobile",
				},
				address: {
					title: "地址",
					type: "text",
					maxlength: -1,
					disabled: true,
					placeholder: "请选择地址",
					value: addressInfo.address?.address_name || "",
					data: JSON.stringify(addressInfo.address) || "",
					name: "address",
				},
				houseNumber: {
					title: "门牌号",
					type: "text",
					maxlength: 32,
					placeholder: "请输入门牌号",
					value: addressInfo.menpai || "",
					data: addressInfo.menpai || "",
					name: "menpai",
				},
			};
		}

		onLoad({ address_id }: AnyObject) {
			uni.setNavigationBarTitle({ title: address_id ? "编辑地址" : "添加地址" });
			if (address_id) {
				uni.showLoading({ title: "Loading...", mask: true });
				this.$request.get("/addressInfo", { address_id }).then(({ data }) => {
					this.addressInfo = data;
					uni.hideLoading();
				});
			}
		}
		inputValue(e: AnyObject, key: string) {
			const model = this.model[key];
			model.value = model.data = e.detail.value;
		}
		operation(key: string) {
			switch (key) {
				case "address":
					uni.chooseLocation({
						success: ({ name, address }) => {
							const model = this.model[key];
							model.value = name;
							model.data = JSON.stringify({ address_name: name, address });
							this.$forceUpdate();
						},
					});
					break;
				default:
					break;
			}
		}

		submit() {
			const params: AnyObject = {},
				verify = Object.values(this.model).every((item) => {
					params[item.name] = item.data;
					!item.data && uni.showToast({ title: item.placeholder, icon: "none" });
					return Boolean(item.data);
				});
			if (!verify) return;
			params.address_id = this.addressInfo.address_id;

			this.$request.post("/addressInfoHandle", params).then(async ({ msg: title }) => {
				await uni.showToast({ title, duration: 1200, mask: true });
				await sleep(1.2);
				uni.navigateBack({});
			});
		}
	}
</script>

<style lang="scss" scoped>
	// scss
	::v-deep {
		switch {
			transform: scale(0.81);

			.wx-checkbox-input,
			.uni-checkbox-input {
				border-radius: 50%;
				background-color: transparent;
			}

			.wx-checkbox-input.wx-checkbox-input-checked,
			.uni-checkbox-input.uni-checkbox-input-checked {
				background-color: #0d81f6;
				border-color: #0d81f6;
			}

			&:not([disabled]) {
				.wx-checkbox-input:hover,
				.uni-checkbox-input:hover {
					border-color: #0d81f6;
				}
			}
		}
	}
</style>